<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar @click-left="$router.go(-1)" :title="$route.name" left-arrow   right-text="注册" @click-right="$router.push('/register')"/>
    <!-- 表单项 -->
    <van-form @submit="login">
      <van-field
        v-model="userInfo.phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true,validator, message: '请填写手机号' }]"
      />
      <van-field
        v-model="userInfo.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
//引入轻提示框
import {Toast} from 'vant'
//引入封装好的接口
import { Login } from "../util/axios";
export default {
  data() {
    return {
      userInfo: {
        phone: "",
        password: "",
      },
    };
  },
  methods: {
    //自定义验证器
     validator(val) {
      return /1\d{10}/.test(val);
    },
    login() {
        //调取登录接口
        Login(this.userInfo)
          .then((res) => {
            if (res.code == 200) {
              //存储用户信息
              sessionStorage.setItem("user", JSON.stringify(res.list));
              //跳转到首页
              this.$router.push("/mine");
              Toast.success(res.msg)
            } else {
              Toast.fail(res.msg);
            }
          })
          .catch((err) => {
            console.log(err, "错误拦截");
          });
    },
  },
};
</script>

<style scoped>
.van-form{
  margin-top: 2rem;
}
.van-field{
  margin-top: .5rem;
}
</style>
